// 撤场确认
<template>
  <el-row :gutter="6">
    <el-col :span="24" class="col-flex">
      <el-col class="breadcrumb-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/quality' }">质量控制</el-breadcrumb-item>
          <el-breadcrumb-item>外业情况上报</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <!-- 主要操作区域 -->
      <el-col v-loading="config.loading" class="maincont-container">
        <div class="tab-container" v-if="config.tabShow">
          <el-tabs v-model="tabConfig.activeName">
            <el-tab-pane name="todo">
              <span slot="label">
                {{runningtablable}}
                <el-badge
                  v-if="config.todoCount>0"
                  :value="config.todoCount"
                  style="margin-left:2px"
                ></el-badge>
              </span>
              <my-tableX
                :configs="todoConfig.configs"
                :tableData="todoConfig.data"
                @dataEdit="handleTodo"
                v-if="showtasktable && tabConfig.activeName==='todo'"
              ></my-tableX>
              <my-tableX
                :configs="runingTaskConfig.configs"
                :tableData="runingTaskConfig.data"
                @dataAdd="addNewApply"
                @dataView="viewDetail"
                v-if="!showtasktable && tabConfig.activeName==='todo'"
              ></my-tableX>
            </el-tab-pane>
            <el-tab-pane label="历史记录" name="finish">
              <my-tableX
                v-if="tabConfig.activeName==='finish'"
                :configs="completedTaskConfig.configs"
                :tableData="completedTaskConfig.data"
                @dataView="viewDetail"
              ></my-tableX>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="flow-container" v-if="!config.tabShow">
          <div class="flow-step fix">
            <my-stepX :configs="flowConfig.stepConfig"></my-stepX>
          </div>
          <div class="flow-form scrollable">
            <el-form
              ref="flowFormData"
              :validate-on-rule-change="false"
              :model="flowFormData"
              label-width="0px"
              size="small"
              :rules="flowConfig.currentRule"
            >
              <h4 class="form-title">{{flowConfig.formTitle}}</h4>
              <table border="1px" cellpadding="0" cellspacing="0" class="form-data">
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">标段/勘察单位</td>
                  <td colspan="8" width="80%">
                    <el-input readonly type="text" size="small" v-model="flowFormData.tenders"></el-input>
                  </td>
                </tr>
                <!-- <tr align="center">
                  <td class="form-label" colspan="2" width="20%">项目编号</td>
                  <td colspan="2" width="20%">
                    <el-input
                      readonly
                      placeholder="自动填写"
                      v-model="flowFormData.subjectId"
                      size="small"
                    ></el-input>
                  </td>
                  <td class="form-label" colspan="2" width="20%">项目名称</td>
                  <td colspan="4" width="40%">
                    <el-input
                      readonly
                      placeholder="自动填写"
                      v-model="flowFormData.subjectId"
                      size="small"
                    ></el-input>
                  </td>
                </tr>-->
                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">工程编号</td>
                  <td colspan="2" width="20%">
                    <el-form-item :show-message="false" prop="projectId">
                      <el-select
                        v-model="flowFormData.projectId"
                        @change="changeProjectId"
                        placeholder="请选择工程编号"
                        :disabled="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      >
                        <el-option
                          v-for="item in dictData.prolist"
                          :key="item.projectId"
                          :label="item.projectId"
                          :value="item.projectId"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">工程名称</td>
                  <td colspan="4" width="40%">
                    <el-input
                      placeholder="自动填写"
                      v-model="flowFormData.projectName"
                      size="small"
                      readonly
                    ></el-input>
                  </td>
                </tr>

                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">上报人</td>
                  <td colspan="2" width="20%">
                    <el-form-item label-width="0" prop="uploader">
                      <el-input
                        v-model="flowFormData.uploader"
                        size="small"
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">上报时间</td>
                  <td colspan="4" width="40%">
                    <el-form-item label-width="0" :show-message="false" prop="createTime">
                      <el-input
                        v-model="flowFormData.createTime"
                        placeholder="自动生成"
                        size="small"
                        :readonly="true"
                      ></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td class="form-label" colspan="2" width="20%">现场情况说明</td>
                  <td class="form-label" colspan="8" width="80%">
                    <el-form-item label-width="0" :show-message="true" prop="condition">
                      <el-input
                        v-model="flowFormData.fieldcondition"
                        type="textarea"
                        rows="5"
                        size="small"
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <td class="form-label" colspan="2" width="20%">现场照片(视频)</td>
                  <td align="left" class="form-label" colspan="8" width="80%">
                    <el-upload
                      action="#"
                      :http-request="uploadSectionFileImages"
                      :file-list="fileList"
                      :before-upload="beforeUpload"
                      :on-exceed="handleExceed"
                      :limit="5"
                      :accept="filetype"
                      :disabled="flowConfig.currentRule!=flowConfig.rules.node_1||flowConfig.formState.readonly"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreviewImage"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      :auto-upload="true"
                    >
                      <i
                        v-if="flowConfig.currentRule===flowConfig.rules.node_1&&!flowConfig.formState.readonly"
                        class="el-icon-plus"
                      ></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" v-if="!isVideo" :src="imageDialogUrl" />
                      <video width="100%" v-if="isVideo" :src="videoDialogUrl"></video>
                    </el-dialog>
                  </td>
                </tr>
                <tr>
                  <td class="form-label" colspan="2" width="20%">确认人</td>
                  <td colspan="2" width="20%">
                    <el-form-item label-width="0" :show-message="false" prop="approver">
                      <el-input
                        size="small"
                        v-model="flowFormData.approver"
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_2||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                  <td class="form-label" colspan="2" width="20%">确认时间</td>
                  <td colspan="4" width="40%">
                    <el-input
                      readonly
                      type="text"
                      placeholder="自动生成"
                      size="small"
                      v-model="flowFormData.approveTime"
                    ></el-input>
                  </td>
                </tr>

                <tr align="center">
                  <td class="form-label" colspan="2" width="20%">勘察总体意见</td>
                  <td colspan="8" width="80%">
                    <el-form-item label-width="0" :show-message="false" prop="message">
                      <el-input
                        type="textarea"
                        rows="10"
                        v-model="flowFormData.message"
                        size="small"
                        :readonly="flowConfig.currentRule!=flowConfig.rules.node_2||flowConfig.formState.readonly"
                      ></el-input>
                    </el-form-item>
                  </td>
                </tr>
              </table>
              <el-form-item class="btns">
                <el-button
                  v-if="!flowConfig.formState.readonly"
                  @click="resolveflow"
                  type="primary"
                >{{flowConfig.currentBtn.resolveText}}</el-button>
                <el-button @click="cancelflow">{{flowConfig.currentBtn.cancelText}}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-col>
  </el-row>
</template>


<script>
import myTableX from "@/components/base/tableX";
import myStepX from "@/components/base/stepX";
import { formatDate } from "@/utils/date";
import { random } from "@/utils/random";
import httpfile from "@/api/file/index";
import fileType from "@/config/file.type.config";

// 全局变量
var glbVar = {};
var taskListParam = {};
var mBusinessType = 13;

var refRoles = []; //流程涉及到的角色列表

export default {
  components: {
    myTableX,
    myStepX,
  },

  // 初始化
  created() {
    glbVar.subjectId = this.$store.state.projectInfo.projectName;
    glbVar.user = this.$store.state.m_user.userInfo;
    this.flowFormData.subjectId = glbVar.subjectId;
    this.flowStartParam.userid = glbVar.user.id;
    this.flowStartParam.path = this.$route.path;

    // 初始化工程数据列表？？？

    this.$api.project
      .listByCompany(glbVar.subjectId, glbVar.user.company)
      .then((res) => {
        if (res.code === 200) {
          this.dictData.prolist = res.data;
        }
      });

    let query = this.$route.query;
    if (Object.keys(query).length != 0) {
      this.config.tabShow = false;
      if (query.todo) {
        this.$api.fieldcondition
          .getbyid(query.id)
          .then((res) => {
            if (res.code === 200) {
              this.handleTodo(res.data);
            } else {
              console.log("get todo business detail:" + res.msg);
            }
          })
          .catch((err) => {
            console.log("get todo business detail:" + err);
            this.$message.info("get todo business detail:" + err);
          });
      } else {
        this.$api.fieldcondition
          .getbyid(query.remark)
          .then((res) => {
            if (res.code === 200) {
              this.viewDetail(res.data);
            } else {
              console.log("get todo business detail:" + res.msg);
            }
          })
          .catch((err) => {
            console.log("get todo business detail:" + err);
            this.$message.info("get todo business detail:" + err);
          });
      }
    }
  },

  mounted() {
    taskListParam = {
      projectId: glbVar.subjectId,
      businessType: mBusinessType, // ## 待修改
      userId: glbVar.user.id,
    };

    this.initList(taskListParam);
  },

  watch: {
    $route(to, from) {
      if (to.path === from.path && to.query !== from.query) {
        this.initList(taskListParam);
      }
    },
  },

  data() {
    let glbcolumns = [
      { field: "tenders", name: "标段" },
      { field: "projectId", name: "工程编号" },
      { field: "projectName", name: "工程名称" },
      { field: "uploader", name: "上报人" },
      { field: "createTime", name: "上报时间" },
    ];
    return {
      //上传完成限制
      isUploadFinished: false,
      fileListLength: 0,

      filetype: fileType.fieldcondition,
      //文件上传
      imageDialogUrl: "",
      videoDialogUrl: "",
      dialogVisible: false,
      fileList: [],
      fileList4api: [],
      isVideo: false,

      //tab标签的lable
      runningtablable: "我的待办",

      //切换第一个tab中表格
      showtasktable: true,

      config: {
        tabShow: true,
        todoCount: 0,
        loading: false,
      },
      tabConfig: {
        activeName: "todo",
      },
      todoConfig: {
        configs: {
          nodata: "暂无待办事项",
          columns: glbcolumns,
          showFilterRow: {
            show: true,
          },
          operationBtn: {
            show: true,
          },
          operationCol: {
            show: true,
            edit: true,
            options: {
              edit: {
                text: "处理",
              },
            },
          },
        },
        data: [],
      },
      runingTaskConfig: {
        configs: {
          nodata: "暂无运行记录",
          columns: glbcolumns,
          showFilterRow: {
            show: true,
          },
          operationBtn: {
            show: true,
            add: true,
            addtext: "上报现场情况",
          },
          operationCol: {
            show: true,
            view: true,
            options: {
              view: {
                text: "详情",
              },
            },
          },
        },
        data: [],
      },

      completedTaskConfig: {
        configs: {
          nodata: "暂无历史记录",
          columns: glbcolumns,
          showFilterRow: {
            show: true,
          },
          operationBtn: {
            show: false,
          },
          operationCol: {
            show: true,
            view: true,
            options: {
              view: {
                text: "详情",
              },
            },
          },
        },
        data: [],
      },

      // 流程状态，当前步骤、流程运行参数
      flowState: {
        step: 0,
        executionId: null,
        flowNodeId: null,
        message: "",
        parent: 0,
        procInstId: null,
        userid: null,
      },

      flowConfig: {
        stepConfig: {
          active: 0,
          processstatus: "process",
          sequence: [],
          data: [
            { flow_node_name: "勘察单位上报现场情况", description: "" },
            { flow_node_name: "勘察总体审核确认", description: "" },
          ],
        },
        formTitle: "现场情况上报",
        currentRule: {},
        currentBtn: {
          resolveText: "上报",
          cancelText: "返回",
        },
        rules: {
          node_1: {
            projectId: [{ required: true, trigger: "change" }],
            uploader: [{ required: true, trigger: "blur" }],
            fieldcondition: [{ required: true, trigger: "blur" }],
          },
          node_2: {
            approver: [{ required: true, trigger: "blur" }],
            message: {
              required: true,
              message: "请填写意见",
              trigger: "blur",
            },
          },
        },
        formState: {
          readonly: false,
        },
      },

      // 数据字典数据
      dictData: {
        //工程列表
        prolist: [],
      },

      flowFormData: {
        id: 0,
        subjectId: "",
        tenders: "",
        major: "",
        projectId: "",
        projectName: "",
        fieldcondition: "",
        url: "",
        createTime: "",
        uploader: "",
        approver: "",
        approveTime: null,

        message: "",
      },

      formDataDetail: [],

      flowStartParam: {
        businessid: null,
        businesstype: mBusinessType,
        major: "",
        userid: null,
      },
    };
  },

  methods: {
    // 刷新
    refresh() {
      if (this.$route.path !== this.$route.fullPath) {
        this.config.tabShow = true;
        this.$router.replace({ path: this.$route.path, query: {} });
      } else {
        this.config.tabShow = true;
        this.initList(taskListParam);
      }
    },

    // 初始化列表
    initList() {
      if (glbVar.user.user_type === "1") {
        this.runingTaskConfig.configs.operationBtn.add = true;
        this.runningtablable = "上报现场情况";
        this.showtasktable = false;
      } else {
        this.showtasktable = true;
      }

      // 初始化列表
      this.$api.startitem
        .getmytasklist(taskListParam)
        .then((res) => {
          if (res.code === 200) {
            if (!res.data || res.data.length === 0) {
              this.todoConfig.data = [];
              return;
            }

            this.$api.fieldcondition
              .getbyids(res.data)
              .then((res) => {
                if (res.code === 200) {
                  this.todoConfig.data = res.data;
                } else {
                  console.log("get todo business detail:" + res.msg);
                }
              })
              .catch((err) => {
                console.log("get todo business detail:" + err);
              });
          } else {
            console.log("get todo ids res:" + res.msg);
          }
        })
        .catch((err) => {
          console.log("get todo ids res:" + err);
        });

      this.$api.startitem
        .getprocessinglist(taskListParam)
        .then((res) => {
          if (res.code === 200) {
            console.log("lenght:" + res.data.length);

            if (!res.data || res.data.length === 0) {
              this.runingTaskConfig.data = [];
              return;
            }
            this.$api.fieldcondition
              .getbyids(res.data)
              .then((res) => {
                if (res.code === 200) {
                  this.runingTaskConfig.data = res.data;
                } else {
                  console.log("get runing business detail:" + res.msg);
                }
              })
              .catch((err) => {
                console.log("get runing business detail:" + err);
              });
          }
        })
        .catch((err) => {
          console.log("get runing ids res:" + err);
        });
      this.$api.startitem
        .getfinishedlist(taskListParam)
        .then((res) => {
          if (res.code === 200) {
            if (!res.data || res.data.length === 0) {
              this.completedTaskConfig.data = [];
              return;
            }
            this.$api.fieldcondition
              .getbyids(res.data)
              .then((res) => {
                if (res.code === 200) {
                  this.completedTaskConfig.data = res.data;
                } else {
                  console.log("get finished business detail:" + res.msg);
                }
              })
              .catch((err) => {
                console.log("get finished business detail:" + err);
              });
          }
        })
        .catch((err) => {
          console.log("get finished business detail:" + err);
        });
    },

    /**
     * @description: 发起一个变更申请,预操作
     */
    addNewApply() {
      this.flowConfig.formState.readonly = false;
      this.flowConfig.stepConfig.active = 0;

      this.flowConfig.currentRule = this.flowConfig.rules.node_1;
      this.flowFormData.tenders =
        glbVar.user.nick_name + "/" + glbVar.user.company;
      this.flowFormData.subjectId = glbVar.subjectId;

      this.config.tabShow = false;
    },

    /**
     * @description: 处理待办任务
     */
    handleTodo(row) {
      let id = row.id;
      this.flowFormData.id = row.id;
      this.flowFormData.subjectId = row.subjectId;
      this.flowFormData.tenders = row.tenders;
      this.flowFormData.major = row.major;
      this.flowFormData.projectId = row.projectId;
      this.flowFormData.projectName = row.projectName;
      this.flowFormData.fieldcondition = row.fieldcondition;
      this.flowFormData.url = row.url;
      this.flowFormData.createTime = row.createTime;
      this.flowFormData.uploader = row.uploader;
      this.flowFormData.approver = row.approver;
      this.flowFormData.approveTime = row.approveTime;
      this.flowFormData.message = "";

      // url
      this.fileList = [];
      if (row.url != "") {
        row.url.split(";").forEach((item) => {
          if (item != "") {
            let b = item.split("/");
            this.fileList.push({
              name: b[b.length - 1].slice(18),
              realname: b.slice(b.length - 1, b.length).toString(String),
              url: item,
            });
          }
        });
      }

      // 初始化公告默认角色列表
      this.$api.startitem.getRoleByRuningInfo(mBusinessType, id).then((res) => {
        if (res.code === 200) {
          refRoles = res.data;
        }
      });

      this.$api.startitem
        .getworkflow({
          businessType: mBusinessType,
          businessId: id,
        })
        .then((res) => {
          if (res.code === 200) {
            let { id, proc_inst_id } = res.data;
            this.$api.startitem
              .getcurrentstage({
                executionId: id,
                procInstId: proc_inst_id,
              })
              .then((res) => {
                if (res.code === 200) {
                  this.flowConfig.formState.readonly = false;
                  this.flowConfig.stepConfig.active = res.data[0];
                  this.changeStep(res.data[0]);
                  this.flowState.executionId = id;
                  this.flowState.flowNodeId = res.data[1];
                  this.flowState.message = "";
                  this.flowState.parent = 0;
                  this.flowState.procInstId = proc_inst_id;
                  // this.flowState.time = formatDate(
                  //   new Date(),
                  //   "yyyy-MM-dd hh:mm:ss"
                  // );
                  this.flowState.userid = glbVar.user.id;

                  this.config.tabShow = false;
                }
              });
          }
        });
    },

    // 查看流程运行详情,运行时
    viewDetail(row) {
      // console.log(row);
      let id = row.id;
      this.flowFormData.id = row.id;
      this.flowFormData.subjectId = row.subjectId;
      this.flowFormData.tenders = row.tenders;
      this.flowFormData.major = row.major;
      this.flowFormData.projectId = row.projectId;
      this.flowFormData.projectName = row.projectName;
      this.flowFormData.fieldcondition = row.fieldcondition;
      this.flowFormData.url = row.url;
      this.flowFormData.createTime = row.createTime;
      this.flowFormData.uploader = row.uploader;
      this.flowFormData.approver = row.approver;
      this.flowFormData.approveTime = row.approveTime;
      this.flowFormData.message = "";

      // url
      this.fileList = [];
      if (row.url != "") {
        row.url.split(";").forEach((item) => {
          if (item != "") {
            let b = item.split("/");
            this.fileList.push({
              name: b[b.length - 1].slice(18),
              realname: b.slice(b.length - 1, b.length).toString(String),
              url: item,
            });
          }
        });
      }

      // this.initComments(id);
      //读取评论
      this.$api.startitem
        .getcomment({
          businessId: id,
          businessType: mBusinessType,
        })
        .then((res) => {
          console.log("我是评论");
          console.log(res);

          if (res.code === 200) {
            this.flowFormData.message = res.data[0].message;
            this.flowFormData.approver = res.data[0].approver;
            this.flowFormData.approveTime = res.data[0].time;
          }
        });

      this.$api.startitem
        .getworkflow({
          businessType: mBusinessType,
          businessId: id,
        })
        .then((res) => {
          if (res.code === 200) {
            let { id, proc_inst_id } = res.data;
            this.$api.startitem
              .getcurrentstage({
                executionId: id,
                procInstId: proc_inst_id,
              })
              .then((res) => {
                if (res.code === 200) {
                  this.flowConfig.formState.readonly = true;
                  this.flowConfig.stepConfig.active = res.data[0];
                  this.changeStep(res.data[0]);
                  this.config.tabShow = false;
                }
              });
          }
        });
    },

    changeStep(step) {
      console.log("step:" + step);
      this.flowState.step = step;
      this.flowConfig.currentRule = this.flowConfig.rules["node_" + (step + 1)];

      if (step === 0) {
        this.flowConfig.currentBtn = {
          resolveText: "上报",
          cancelText: "返回",
        };
      } else {
        this.flowConfig.currentBtn = {
          resolveText: "确认",
          cancelText: "取消",
        };
      }
    },

    changeProjectId(value) {
      this.dictData.prolist.forEach((item) => {
        if (item.projectId === value) {
          this.flowFormData.projectName = item.projectName;
          this.flowStartParam.major = item.major;
          this.flowFormData.major = item.major;
          return;
        }
      });
    },

    // 执行流程
    resolveflow() {
      if (!this.isUploadFinished) {
        console.log("return UploadFinished");
        this.$message.warning("文件未上传完毕，请稍后重试！");
        return;
      }

      // 预验证
      this.$refs.flowFormData.validate((res) => {
        if (res) {
          this.$confirm("提交操作后不可更改，是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.handleResolve();
            })
            .catch(() => {
              return;
            });
        } else {
          this.$message.warning("请检查必填项");
        }
      });
    },

    handleResolve() {
      if (this.flowState.step === 0) {
        // url
        let url = this.fileList
          .map((item) => {
            return (
              "/" + glbVar.subjectId + "/外业现场情况上报/" + item.realname
            );
          })
          .join(";");

        this.flowFormData.url = url;
        this.flowFormData.createTime = formatDate(
          new Date(),
          "yyyy-MM-dd hh:mm:ss"
        );
        this.config.loading = true;

        this.$api.fieldcondition
          .add(this.flowFormData)
          .then((res) => {
            if (res.code === 200) {
              this.flowStartParam.businessid = res.data.id;
              this.$api.startitem
                .starttask(this.flowStartParam)
                .then((res) => {
                  this.config.loading = false;

                  if (res.code === 200) {
                    this.$message.success("发送成功：已发送至勘察总体审核");
                    this.refresh();
                  } else {
                    this.$message.error("发送失败：" + res.msg);
                  }
                })
                .catch((err) => {
                  this.$message.error("发送失败：" + err);
                });
            } else {
              this.config.loading = false;
              this.$message.error("提交表单失败:" + res.msg);
            }
          })
          .catch((err) => {
            this.config.loading = false;
            this.$message.error("提交表单失败:" + err);
          });
      } else {
        // 走审批接口
        // 先更新

        this.config.loading = true;

        this.flowState.approver = this.flowFormData.approver;
        this.flowState.message = this.flowFormData.message;
        this.flowFormData.approveTime = formatDate(
          new Date(),
          "yyyy-MM-dd hh:mm:ss"
        );
        this.flowState.time = formatDate(new Date(), "yyyy-MM-dd hh:mm:ss");
        this.$api.fieldcondition
          .update({
            id: this.flowFormData.id,
            approver: this.flowFormData.approver,
            approveTime: this.flowFormData.approveTime,
          })
          .then((res) => {
            if (res.code === 200) {
              this.$api.startitem
                .approve([this.flowState])
                .then((res) => {
                  if (res.code === 200) {
                    if (this.flowState.step === 1) {
                      let announce = {
                        subject_id: this.flowFormData.subjectId,
                        url: "",
                        remark: this.flowFormData.id,
                        notice_type: "外业现场情况上报",
                        role: refRoles,
                        create_by: this.flowFormData.approver,
                        create_time: this.flowFormData.approveTime,
                        notice_content:
                          "【" +
                          this.flowFormData.tenders.split("/")[0] +
                          "】外业现场上报完成",
                        notice_title:
                          "【" +
                          this.flowFormData.tenders.split("/")[0] +
                          "】外业现场上报完成",
                        path: this.$route.path,
                      };

                      this.$api.announce
                        .add(announce)
                        .then((res) => {
                          this.config.loading = false;
                          if (res.code == 200) {
                            this.$message.success("操作成功!");
                            this.refresh();
                          } else {
                            this.$message.error("操作失败!" + res.msg);
                          }
                        })
                        .catch((err) => {
                          this.config.loading = false;
                          this.$message.error("操作失败!" + err);
                        });
                    } else {
                      this.refresh();
                    }
                  }
                })
                .catch((err) => {
                  this.config.loading = false;
                });
            }
          })
          .catch((err) => {
            this.config.loading = false;
          });
      }
    },

    // 取消流程
    cancelflow() {
      this.config.tabShow = true;
      this.flowFormData = {};
    },

    uploadSectionFileImages(params) {
      this.isUploadFinished = false;
      this.fileListLength += 1;

      const uid = params.file.uid;

      // ##修改##
      let URL = window.URL || window.webkitURL;
      let url = URL.createObjectURL(params.file);

      let keyname = formatDate(new Date(), "yyyyMMddhhmmss") + random();
      // ##修改##

      const fileData = new FormData();
      fileData.append("file", params.file);
      const query = {
        path:
          "/" +
          glbVar.subjectId +
          "/外业现场情况上报/" +
          keyname +
          params.file.name,
      };

      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
          token: window.sessionStorage.getItem("token"),
        },
        // 这一段代码解决进度条不显示的问题，属于 axios 的使用知识。具体可以看文末的参考链接。
        onUploadProgress: (progressEvent) => {
          const percentCompleted = Math.floor(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          params.onProgress({ percent: percentCompleted });
        },
      };

      httpfile.upload(query, config, fileData).then((res) => {
        if (res.status == 200) {
          // ##修改##
          this.fileList.push({
            url: url,
            name: params.file.name,
            realname: keyname + params.file.name,
          });
          // ##修改##
          params.onSuccess(res);

          if (this.fileListLength === this.fileList.length) {
            console.log("炒鸡成功");
            this.isUploadFinished = true;
          } else {
            console.log("普通成功");
            this.isUploadFinished = false;
          }
        }
      });
    },

    beforeUpload(file) {
      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (this.filetype.indexOf("." + testmsg.toLowerCase()) < 0) {
        this.$message({
          message: "上传文件格式不符合要求：" + testmsg,
          type: "warning",
        });
        return false;
      }
      return true;
    },

    handleExceed(files, fileList) {
      this.$message.warning("最多选择 5 个文件");
    },

    handlePictureCardPreviewImage(file) {
      window.open(file.url);
    },

    handleRemove(file, fileList) {
      let temp = this.fileList.filter((item) => {
        return item.uid !== file.uid;
      });
      this.fileList = temp;

      this.fileListLength -= 1;
    },
    beforeRemove() {},
  },

  computed: {
    currApproveInfo() {
      let index = this.flowState.step;
      if (index === 1) {
        return {
          approver: this.flowFormData.replier,
        };
      } else {
        return {
          approver: this.flowFormData.inspectPerson,
        };
      }
    },
  },
};
</script>



<style lang='less' scoped>
.col-flex {
  box-sizing: border-box;
  padding-top: 30px;
  height: 100%;

  .breadcrumb-container {
    height: 30px;
    margin-top: -20px;
  }

  .maincont-container {
    height: 100%;
    margin-top: 3px;
    .tab-container {
      height: 100%;
      /deep/.el-tabs {
        height: 100%;

        .el-tabs__header {
          margin: 0;
        }
        .el-tabs__content {
          height: calc(~"100% - 40px");
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
    .flow-container {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      padding-top: 60px;

      .flow-step {
        width: 100%;
        height: 60px;
        margin-top: -60px;
      }

      .flow-form {
        text-align: center;
        height: calc(~"100% - 10px");
        // height: 100%;

        table .form-label {
          background-color: #efefef;
        }

        .form-title {
          margin: 10px !important;
        }

        .form-data {
          border-collapse: collapse;
          margin: auto;
          width: 70%;
          font-size: 13px;
        }
        .btns {
          width: 70%;
          margin: 20px auto;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }

  .scrollable {
    overflow: auto;
  }

  /deep/.el-form-item {
    padding: 0px;
    margin: 0px;
    .el-form-item__content {
      line-height: normal;
    }
    .el-select {
      display: block;
    }
  }
}
</style>
